<template>
  <div>
    <el-form :model="formItem" label-width="120px" size="mini">
      <el-form-item label="备品备件分类" prop="spareTypeId">
        <el-select v-model="formItem.s_spareTypeId.value" clearable placeholder="请选择货品信息">
          <el-option v-for="(item) in spareType" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="货品名称" prop="goodsFileId">
        <el-select v-model="formItem.s_goodsFileId.value" clearable placeholder="请选择备件类型">
          <el-option v-for="(item) in goodsFile" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="manufacturerId">
        <el-select v-model="formItem.s_manufacturerId.value" clearable placeholder="请选择供应商">
          <el-option v-for="(item) in manufacturer" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="库房" prop="storehouseId">
        <el-select v-model="formItem.s_storehouseId.value" clearable placeholder="请选择库房">
          <el-option v-for="(item) in storehouse" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="批次" prop="batch">
        <el-input v-model="formItem.s_batch.value" placeholder="请输入批次..." />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="timeRangeStockStart"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="timestamp"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { list as goodsFileList } from '@neu/dcam-ui/api/goodsFile'
import { list as storehouseList } from '@neu/dcam-ui/api/storehouse'
import { list as manufacturerList } from '@neu/dcam-ui/api/manufacturer'
import { list as spareTypeList } from '@neu/dcam-ui/api/spareType'
import { clone } from '@neu/biz-core/utils/utils'
import { formatDate } from '@neu/biz-core/utils/utils'

// 定义一个查询表单原始项
const formItem = {
  s_goodsFileId: { value: '', label: '货品名称', valueName: '' },
  s_spareTypeId: { value: '', label: '备品备件分类', valueName: '' },
  s_batch: { value: '', label: '批次', valueName: '' },
  s_manufacturerId: { value: '', label: '供应商', valueName: '' },
  s_storehouseId: { value: '', label: '库房', valueName: '' },
  s_stockStartTime: { value: '', label: '开始日期', valueName: '' },
  s_stockEndTime: { value: '', label: '结束日期', valueName: '' }
}

export default {
  name: 'StockTableFilter',
  props: {
    filter: {
      required: true,
      type: Function
    }
  },
  data() {
    return {
      formItem: {
        ...formItem
      },
      /** 货品信息 */
      goodsFile: [],
      /** 备品类型 */
      spareType: [],
      /** 供应商 */
      manufacturer: [],
      /** 仓库 */
      storehouse: [],
      /** 时间选择器 */
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      /** 存储时间范围 */
      timeRangeStockStart: [],
      /** 资产类型树 */
      typeOptions: []
    }
  },
  mounted() {
    goodsFileList().then(response => {
      this.goodsFile = response.data
    })
    manufacturerList().then(response => {
      this.manufacturer = response.data
    })
    storehouseList().then(response => {
      this.storehouse = response.data
    })
    spareTypeList().then(response => {
      this.spareType = response.data
    })
  },
  created() {

  },
  methods: {

    // 查询按钮点击事件处理
    search: function() {
      if (this.timeRangeStockStart.length !== 0) {
        this.formItem.s_stockStartTime.value = this.timeRangeStockStart[0]
        this.formItem.s_stockStartTime.valueName = formatDate(this.timeRangeStockStart[0], 'YYYY-MM-DD')
        this.formItem.s_stockEndTime.value = this.timeRangeStockStart[1]
        this.formItem.s_stockEndTime.valueName = formatDate(this.timeRangeStockStart[1], 'YYYY-MM-DD')
      }

      const goodsFiles = this.goodsFile.filter(t => {
        return t.id === this.formItem.s_goodsFileId.value
      })
      this.formItem.s_goodsFileId.valueName = goodsFiles.length === 1 ? goodsFiles[0].name : this.formItem.s_goodsFileId.value

      const manufacturers = this.manufacturer.filter(t => {
        return t.id === this.formItem.s_manufacturerId.value
      })
      this.formItem.s_manufacturerId.valueName = manufacturers.length === 1 ? manufacturers[0].name : this.formItem.s_manufacturerId.value

      const storehouses = this.storehouse.filter(t => {
        return t.id === this.formItem.s_storehouseId.value
      })
      this.formItem.s_storehouseId.valueName = storehouses.length === 1 ? storehouses[0].name : this.formItem.s_storehouseId.value

      const spareTypes = this.spareType.filter(t => {
        return t.id === this.formItem.s_spareTypeId.value
      })
      this.formItem.s_spareTypeId.valueName = spareTypes.length === 1 ? spareTypes[0].name : this.formItem.s_spareTypeId.value

      this.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      for (var t in formItem) {
        formItem[t].value = ''
        formItem[t].valueName = ''
      }
      formItem.s_stockStartTime = { value: '', label: '开始日期', valueName: '' }
      formItem.s_stockEndTime = { value: '', label: '结束日期', valueName: '' }
      this.timeRangeStockStart = []
      this.formItem = clone(formItem)
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    onFilterItemClose: function(item) {
      if (item.k === 's_stockStartTime' || item.k === 's_stockEndTime') {
        this.formItem['s_stockStartTime'] = { value: '', label: '开始日期', valueName: '' }
        this.formItem['s_stockEndTime'] = { value: '', label: '结束日期', valueName: '' }
      } else {
        formItem[item.k].value = ''
        formItem[item.k].valueName = ''
        this.formItem[item.k] = clone(formItem[item.k])
      }

      this.filter(this.formItem)
    }
  }
}
</script>
